
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.ico">
    
    <title>Inicio | Sistema de Gestión Odontológica</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrapvalidator-dist-0.4.5/dist/css/bootstrapValidator.min.css"/>
	<!-- <link rel="stylesheet" href="css/bootstrap-responsive.css"> -->
	<link rel="stylesheet" href="css/datepicker.css">

    <link href="css/carousel.css" rel="stylesheet">

    <link href="css/estilo.css" rel="stylesheet" type="text/css" />

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.htm">Kuradent</a>
        </div>
		
		<ul class="nav navbar-nav">
			<li class="active"><a href="index.htm"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
			<li><a href="acerca.htm"><span class="glyphicon glyphicon-info-sign"></span> Acerca de</a></li>
			<li><a href="mision.htm"><span class="glyphicon glyphicon-screenshot"></span> Misión</a></li>
		</ul>	

        <div class="navbar-collapse collapse">
          <form name="login" class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" name="fuser" placeholder="Usuario" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" name="fpass" placeholder="Contraseña" class="form-control">
            </div>
            <button type="button" class="btn btn-primary" onclick="logeo()">Entrar</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->

	<div class="container">
	<div id="inicio-carousel" class="carousel slide" data-ride="carousel">
	      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#inicio-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#inicio-carousel" data-slide-to="1"></li>
        <li data-target="#inicio-carousel" data-slide-to="2"></li>
      </ol>
		<div  class = "carousel-inner">
			<div class = "active item">
				<img src="img/abs.jpg" class="img-responsive" alt="colors" />
			</div>
			
			<div class = "item">
				<img src="img/audi.jpg" class="img-responsive" alt="galaxies" />		
			</div>
			
			<div class="item">
				<img src="img/sport.jpg" class="img-responsive" alt="butterfly" />
			</div>


		</div>
		
      <a class="left carousel-control" href="#inicio-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#inicio-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	</div>
	</div>


    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-3 well well-red" >
			<legend><span class="glyphicon glyphicon-calendar"></span> Solicitar Consulta</legend>
			<form id="forma_login" >

			   <div class="form-group">
				  <label for="name">Nombre</label>
				  <input type="text" class="form-control input-sm" name="nombre" 
					 placeholder="Ingresar Nombre">
			   </div>
			   <div class="form-group" >
				  <label for="name">Apellido</label>
				  <input type="text" class="form-control input-sm" name="apellido" 
					 placeholder="Ingrese Apellido">
			   </div>
			   <div class="form-group">
				  <label for="name">Email</label>
				  <input type="email" class="form-control input-sm" name="email" 
					 placeholder="Ingrese Email">

			   </div>
			   
			   	<div class="form-group">

				  <label for="name">Fecha</label>
				  <div class="input-group date" id="dobPicker" data-date-format="YYYY/DD/MM">
				  <input type="datetime" value="20/06/2014" class="form-control input-sm" id="fecha" 
					 placeholder="Ingrese fecha">
					 <span class="input-group-addon">
                    <span class="glyphicon-calendar glyphicon"></span>
                </span>
                </div>
			   </div>
			   
			   <button type="submit" class="btn btn-primary">Limpiar</button>&nbsp;
			   <button type="submit" class="btn btn-primary" >Enviar</button>

			</form>
        </div>
        <div class="col-md-9">
          <div class="col-md-6 ">

		  <legend><span class="glyphicon glyphicon-briefcase"></span> Servicios</legend>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>	  
			<br>
		  </div>


		  
		  <div class="col-md-6 ">
		  <legend><span class="glyphicon glyphicon-hdd"></span> Tecnología</legend>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>		
			<br>  
		  </div>
		  
		   <div class="col-md-6 ">
		  <legend><span class="glyphicon glyphicon-user"></span> Especialidades</legend>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>		
			<br>  
		  </div>

		  
		  <div class="col-md-6 ">
		  <legend><span class="glyphicon glyphicon-star"></span> Reconocimientos</legend>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>		  
			<br>
		  </div>

       </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Kuradent 2014</p>
      </footer>
    </div> <!-- /container -->


      <div class="modal fade" id="confirmacionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Confirmación</h4>
          </div>
          <div class="modal-body">
            La solicitud de consulta se envió con exito
          </div>
          <div class="modal-footer">
          <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <!-- <button type="button" href="almacen.htm" class="btn btn-primary" id="boton_confirmacion" data-dismiss="modal">Aceptar</button> -->
          <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</a>
          </div>
        </div>
        </div>
      </div> 


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrapvalidator-dist-0.4.5/dist/js/bootstrapValidator.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
		<script>
			$(document).ready(function(){
				$('.carousel').carousel();
				
                
                $('#fecha').datepicker({
                    format: "dd/mm/yyyy"
                });  



                $('#forma_login').bootstrapValidator({
		        message: 'Este valor no es valido',
		        feedbackIcons: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		            nombre: {
		                message: 'Este nombre de usuario no es valido',
		                validators: {
		                    notEmpty: {
		                        message: 'El usuario no puede estar vacio'
		                    }
		                }
		            },
		            apellido: {
		                message: 'Este apellido no es valido',
		                validators: {
		                    notEmpty: {
		                        message: 'El apellido no puede estar vacio'
		                    }
		                }
		            },

		            email: {
		                validators: {
		                    notEmpty: {
		                        message: 'El email es requerido no puede estar vacio'
		                    },
		                    emailAddress: {
		                        message: 'La entrada no es un email valido'
		                    }
		                }
		            }
		        },
			    

        		submitHandler: function(validator, form, submitButton) {
            		
            		// $('#confirmacionModal').end().modal();
            		alert("solicitud enviada con éxito");
            		window.location.href = "index.htm";
        		}

        		});
            
            });


		</script>
		
		<script>
		function logeo() {
			var x = document.forms["login"]["fuser"].value;
			var y = document.forms["login"]["fpass"].value;
			
			if (x==null || x=="") {
				alert("First name must be filled out");
				//window.location.replace("#");
			} else if (x=="julio" && y=="almacen") {
				window.location.href = "almacen.htm";
			} else if (x=="jose" && y=="paciente") 
				window.location.href = "atencion_paciente.htm";
			else{
				alert("usuario no registrado");
				//return false;
			} 
		}
		</script>
		

	
	
  </body>
</html>
